<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/vue.js" type="text/javascript"></script>
    <script src="/js/axios.js" type="text/javascript"></script>
    <script src="/js/index.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <el-form :model="user" status-icon :rules="rules" ref="user" class="demo-ruleForm"
                    label-width="100px">
                <el-form-item label="账号" prop="username">
                    <el-input  v-model="user.username" ></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="nickname">
                    <el-input  v-model="user.nickname" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input  type="password"  v-model="user.password" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register('user')">注册</el-button>
                    <el-button @click="resetForm('user')">重置</el-button>
                    <el-button type="primary"><a href="/">首页</a></el-button>
                </el-form-item>
            </el-form>
            <br>

        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                user:{username:"",nickname:"",password:""},
                rules: {
                    username:[{ required: true, message: '账号不能为空'}],
                    nickname:[{ required: true, message: '用户名不能为空'}],
                    password:[{ required: true, message: '密码不能为空'}]
                }
            }
        },
        methods:{
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            register(formName){
                let that = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("/register",that.user).then(
                            function (resp){
                                console.log(resp.data.data)
                                if(resp.data.data!=null){
                                    that.$notify({
                                        title: '注册完成',
                                        type: 'success'
                                    });
                                    that.resetForm(formName)
                                    return
                                }
                                that.$notify.error({
                                    title: '该账号已存在'
                                });
                            }
                        )
                    } else {
                        this.$notify({
                            title: '效验未通过',
                            type: 'warning'
                        });
                        return false;
                    }
                });
            }
        },
        mounted(){

        }
    })
</script>
<style>
    .container{
        width: 400px;
        height: 200px;
        margin: 10% auto;
    }
    a{
        text-decoration: none;
        color: #FFFFFF;
    }
</style>
</html>